import React, { Component } from 'react'
import { Image } from 'antd-mobile'
import './proList.scss'

import { useNavigate } from 'react-router'

/*
  路由传参的第一种方法：URL 拼接
    1. 在定义路由规则的时候需要提前定义好动态参数
    <Route path='/detail/:proid' element={<Detail />} />
    2. 跳转页面的时候通过 url 拼接参数即可
    navigate('/detail' + item.proid)
    3. 在详情页面获取我们的参数
    import { useParams } from 'react-router'
    const params = useParams()
    console.log(params);

  路由传参的第二种方法： state 传参
    1. 在跳转页面时，加第二个参数，在里面配置 state
      navigate('/detail/' + item.proid, {
        state: {
          title: '床前明月光',
          name: '李白',
          age: 18,
          obj: {
            h: '180'
          }
        }
      })
    2. 在详情页面中进行数据的接收
    import { useParams, useLocation } from 'react-router'
    const location = useLocation()
    console.log(location);

*/


function ProList({ proList }) {

  // navigate 是用来做页面跳转用的
  const navigate = useNavigate()

  return (
    <ul>

      {
        proList.length &&
        proList.map(item => {
          return (<li className='pro' key={item.proid} onClick={() => {
            console.log(item.proid);
            // 将 proid 传递到详情页面中
            navigate('/detail/' + item.proid, {
              state: {
                title: '床前明月光',
                name: '李白',
                age: 18,
                obj: {
                  h: '180'
                }
              }
            })
          }}>
            <Image className='image' src={item.img1} />
            <p className='pro_title'> {item.proname} </p>
          </li>)
        })
      }

    </ul>
  )
}


export default ProList